<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<link rel="shortcut icon" href="favicon.ico">
	<link rel="stylesheet" href="css/iconfont.css">
	<link rel="stylesheet" href="css/global.css">
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/bootstrap-theme.min.css">
	<link rel="stylesheet" href="css/login.css">
	<script src="js/jquery.1.12.4.min.js" charset="UTF-8"></script>
	<script src="js/bootstrap.min.js" charset="UTF-8"></script>
	<script src="js/jquery.form.js" charset="UTF-8"></script>
	<script src="js/global.js" charset="UTF-8"></script>
	<script src="js/login.js" charset="UTF-8"></script>
	<script type="text/javascript" src="/webjars/vue/2.6.10/dist/vue.js"></script>
	<script src="/webjars/axios/0.19.0/dist/axios.js" type="text/javascript"></script>
	<title>U袋网 - 登录 / 注册</title>
</head>
<body>
<div id="vuebox">
	<div class="public-head-layout container">
		<a class="logo" href="index.html"><img src="images/icons/logo.jpg" alt="U袋网" class="cover"></a>
	</div>
	<div style="background:url(images/login_bg.jpg) no-repeat center center; ">
		<div class="login-layout container">
			<!--登录-->
			<div class="form-box login">
				<div class="tabs-nav">
					<h2>欢迎登录U袋网平台</h2>
				</div>
				<div class="tabs_container">

					<form class="tabs_form" th:action="@{/security/dologin}" method="post" id="login_form">
						<div class="form-group">
							<div class="input-group">
								<div class="input-group-addon">
									<span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
								</div>
								<input class="form-control phone" name="loginAcct" id="login_phone" required placeholder="手机号" maxlength="11" autocomplete="off" type="text">
							</div>
						</div>
						<div class="form-group">
							<div class="input-group">
								<div class="input-group-addon">
									<span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
								</div>
								<input class="form-control password" name="userPswd" id="login_pwd" placeholder="请输入密码" autocomplete="off" type="password">
								<div class="input-group-addon pwd-toggle" title="显示密码"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></div>
							</div>
						</div>
						<div class="checkbox">
	                        <label>
	                        	<input checked="" name="remember" id="login_checkbox"  type="checkbox"><i></i> 30天内免登录
	                        </label>
	                        <a href="javascript:;" class="pull-right" id="resetpwd">忘记密码？</a>
	                    </div>
	                    <!-- 错误信息 -->
						<div class="form-group">
							<div class="error_msg" id="login_error">
								<!-- 错误信息 范例html
								<div class="alert alert-warning alert-dismissible fade in" role="alert">
									<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
									<strong>密码错误</strong> 请重新输入密码
								</div>
								 -->
							</div>
						</div>
	                    <button type="submit" class="btn btn-large btn-primary btn-lg btn-block">登录</button><br>
						<p th:if="${param.error}" th:text="用户名或密码错误"></p>
	                    <p class="text-center">没有账号？<a href="javascript:;" id="register">免费注册</a></p>
                    </form>
                    <div class="tabs_div">
	                    <div class="success-box">
	                    	<div class="success-msg">
								<i class="success-icon"></i>
	                    		<p class="success-text">登录成功</p>
	                    	</div>
	                    </div>
	                    <div class="option-box">
	                    	<div class="buts-title">
	                    		现在您可以
	                    	</div>
	                    	<div class="buts-box">
	                    		<a role="button" href="index.html" class="btn btn-block btn-lg btn-default">继续访问商城</a>
								<a role="button" href="udai_welcome.html" class="btn btn-block btn-lg btn-info">登录会员中心</a>
	                    	</div>
	                    </div>
                    </div>
                </div>
			</div>
			<!--注册-->
			<div class="form-box register">
				<div class="tabs-nav">
					<h2>欢迎注册<a href="/tologin"  class="pull-right fz16" id="reglogin">返回登录</a></h2>
				</div>
				<div class="tabs_container">
					<form class="tabs_form"  method="post">
						<div class="form-group">
							<div class="input-group">
								<div class="input-group-addon">
									<span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
								</div>
								<input class="form-control phone" v-model="phone" name="phone" id="phone"
									   placeholder="手机号" @blur="chazhaoyonghu()" maxlength="11" autocomplete="off" type="text">
							</div>
						</div>
						<div class="form-group">
							<div class="input-group">
								<input type="text" class="form-control code" onblur="tingzhijishiqi()" name="code" v-model="code" id="code" placeholder="输入验证码"
								>
								<span class="input-group-btn">
									<!--<button class="btn btn-primary getsms" id="sendCode"    type="button">发送短信验证码</button>-->
                                <input type="button" class="btn btn-primary getsms"  id="sendCode" value="发送验证码"><br>
                            </span>
							</div>
						</div>
						<div class="form-group">
							<div class="input-group">
								<div class="input-group-addon">
									<span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
								</div>
								<input class="form-control password" v-model="password" name="password" id="register_pwd" placeholder="请输入密码"
									   autocomplete="off" type="password">
								<div class="input-group-addon pwd-toggle" title="显示密码"><span
										class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></div>
							</div>
						</div>
						<div class="checkbox">
							<label>
								<input class="register_checkbox" checked="" id="register_checkbox" type="checkbox"><i></i> 同意<a
									href="temp_article/udai_article3.html">U袋网用户协议</a>
							</label>
						</div>
						<!-- 错误信息 -->
						<div class="form-group">
							<div class="error_msg" id="register_error"></div>
						</div>
						<button class="btn btn-large btn-primary btn-lg btn-block submit"
								type="button" @click="zhuce()">注册
						</button>
					</form>
					<div class="tabs_div">
						<div class="success-box">
							<div class="success-msg">
								<i class="success-icon"></i>
								<p class="success-text">注册成功</p>
							</div>
						</div>
						<div class="option-box">
							<div class="buts-title">
								现在您可以
							</div>
							<div class="buts-box">
								<a role="button" href="index.html" class="btn btn-block btn-lg btn-default">继续访问商城</a>
								<a role="button" href="udai_welcome.html" class="btn btn-block btn-lg btn-info">登录会员中心</a>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--找回密码-->
			<div class="form-box resetpwd">
  				<div class="tabs-nav clearfix">
  					<h2>找回密码<a href="/tologin" class="pull-right fz16" id="pwdlogin">返回登录</a></h2>
  				</div>
  				<div class="tabs_container">
					<form class="tabs_form"  method="post" id="resetpwd_form">
						<div class="form-group">
							<div class="input-group">
								<div class="input-group-addon">
									<span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
								</div>
								<input class="form-control phone"  @blur="zhomouse()" v-model="zhophone" name="phone" id="resetpwd_phone" required placeholder="手机号" maxlength="11" autocomplete="off" type="text">
							</div>
						</div>
						<div class="form-group">
							<div class="input-group">
								<input class="form-control" name="sms" v-model="newcode" id="resetpwd_sms" placeholder="输入验证码" type="text">
								<span class="input-group-btn">
									<button class="btn btn-primary getsms" id="zhaosendCode" type="button">发送短信验证码</button>
								</span>
							</div>
						</div>
						<div class="form-group">
							<div class="input-group">
								<div class="input-group-addon">
									<span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
								</div>
								<input class="form-control password" v-model="newpassword" name="password" id="resetpwd_pwd" placeholder="新的密码" autocomplete="off" type="password">
								<div class="input-group-addon pwd-toggle" title="显示密码"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></div>
							</div>
						</div>
	                    <!-- 错误信息 -->
						<div class="form-group">
							<div class="error_msg" id="resetpwd_error"></div>
						</div>
	                    <button class="btn btn-large btn-primary btn-lg btn-block submit" @click="resetpwd" id="resetpwd_submit" type="button">重置密码</button>
                    </form>
                    <div class="tabs_div">
	                    <div class="success-box">
	                    	<div class="success-msg">
								<i class="success-icon"></i>
	                    		<p class="success-text">密码重置成功</p>
	                    	</div>
	                    </div>
	                    <div class="option-box">
	                    	<div class="buts-title">
	                    		现在您可以
	                    	</div>
	                    	<div class="buts-box">
	                    		<a role="button" href="index.html" class="btn btn-block btn-lg btn-default">继续访问商城</a>
								<a role="button" href="login.html" class="btn btn-block btn-lg btn-info">返回登陆</a>
	                    	</div>
	                    </div>
                    </div>
                </div>
			</div>

		</div>
	</div>
	<!--底部代码-->
	<div class="footer-login container clearfix">
		<ul class="links">
			<a href=""><li>网店代销</li></a>
			<a href=""><li>U袋学堂</li></a>
			<a href=""><li>联系我们</li></a>
			<a href=""><li>企业简介</li></a>
			<a href=""><li>新手上路</li></a>
		</ul>
		<!-- 版权 -->
		<p class="copyright">
			© 2005-2017 U袋网 版权所有，并保留所有权利<br>
			ICP备案证书号：闽ICP备16015525号-2&nbsp;&nbsp;&nbsp;&nbsp;福建省宁德市福鼎市南下村小区（锦昌阁）1栋1梯602室&nbsp;&nbsp;&nbsp;&nbsp;Tel: 18650406668&nbsp;&nbsp;&nbsp;&nbsp;E-mail: 18650406668@qq.com
		</p>
	</div>
</div>
</body>
</html>
<script type="text/javascript">
        var vm=new Vue({
            el:"#vuebox",
            data:{
        phone:"",
		code:"",
                password:"",
		resutl:"",
                addreustl:"",
				shifoucunzai:"",
				iscunzai:"",
				//找回密码部分
                zhophone:"",
				isphontcunzai:"",
				panduancunzai:"",
                newcode:"",
                newpassword:"",
				gairesult:""
            },
            methods:{
                //注册按钮
                chazhaoyonghu:function() {
                    axios.get("/seleByPhone",{params:{phone:this.phone}}).then(res=>{
                        this.shifoucunzai=res.data;
                        if(this.shifoucunzai.msg=='ok'){
                            alert("此用户已存在")
                            this.iscunzai="cunzi"
							return false;
                        }else{
                            this.iscunzai=""
						}
                    })
                },
                zhuce:function () {
                var boolean=$("#register_checkbox").is(':checked');
				if(this.phone.length==0){
				    return false;
				}
				if(this.iscunzai=="cunzi"){
				    alert("用户名已经存在")
					return false;
				}
				var sendcode=$("#sendCode").val();
				if(sendcode=='发送验证码'){
				    alert("请发送验证码进行验证")
					return false;
				}
				if(this.code.length==0){
				    return false;
				}
                if(this.password.length==0){
				    return false;
				}
                if(!boolean){
				    alert("请同意用户协议再注册")
						return false;
					}
					axios.get("user/login.do",{params:{codes:this.code}}).then(res=>{
					    this.result=res.data;
					    console.log(this.result.msg)
					    if(this.result.msg=="ok"){
					        axios.get("/regist/buyer",{params:{phone:this.phone,password:this.password}}).then(res=>{
					            this.addreustl=res.data;
					            if(this.addreustl.msg=="SUCCESS"){
					                alert("注册成功!")
									window.location.href="/tologin"
								}else{
					                alert("注册失败!")
								}
							})
						}else{
					        alert("验证码输入错误哦")
						}
					})
                },


				//找回密码

                zhomouse:function () {
                    axios.get("/seleByPhone",{params:{phone:this.zhophone}}).then(res=>{
                        this.panduancunzai=res.data;
                        if(this.panduancunzai.msg=='fail'){
                            alert("此用户不存在")
                            this.isphontcunzai="bucunzai";
							return false;
                        }else{
                            this.isphontcunzai="";
                        }
                    })
					return false;
                },

				resetpwd:function () {
					var phone=this.zhophone;
                    if(phone.length==0){
                        return false;
					}
                    var sendcode=$(".getsms").val();
                    if(sendcode=='发送验证码'){
                        alert("请发送验证码进行验证")
                        return false;
                    }
                    var newpassword=this.newpassword;
                    if(newpassword.length==0){
                        return false;
					}

					if(this.isphontcunzai=="bucunzai"){
					    alert("这个用户不存在")
						return false;
					}else{
                        axios.get("user/login.do",{params:{codes:this.newcode}}).then(res=>{
                            this.result=res.data;
                            if(this.result.msg=="ok"){
								axios.get("/seleByPhoneup",{params:{phone:this.zhophone,password:this.newpassword}}).then(res=>{
								    this.gairesult=res.data;
								    if(this.gairesult.msg=="ok"){
								        alert("重置失败!")
									}else{
								        alert("重置密码成功")
										window.location.href="/tologin";
									}
								})
                            }else{
                                alert("验证码输入错误哦")
                            }
                        })



					}
                }

            },
			mounted(){

			}
    })
</script>

<script>
    var id;//定时器的id,停止定时器时需要
    var count = 60;//倒计时的时间,单位是秒
    $(function () {
        $("#sendCode").click(function () {
            //获取手机号
            var phone = $("#phone").val();
            if(phone.length==0){
                alert("请输入手机号")
				return false;
			}
            //禁用按钮
            $(this).attr("disabled", "disabled");
            //启动倒计时
            id = setInterval("time()", 1000);
            //发送ajax
            $.getJSON("/user/sendCode.do", {phone: phone}, function (result) {
                if (result.msg("OK")) {
                    alert("验证码已发出!");
                } else {
                    alert(result.msg);
                }
            })
        })
        $("#zhaosendCode").click(function () {
            //获取手机号
            var phone = $("#resetpwd_phone").val();
            if(phone.length==0){
                alert("请输入手机号码")
				return false;
			}
            //禁用按钮
            $(this).attr("disabled", "disabled");
            //启动倒计时
            id = setInterval("time()", 1000);
            //发送ajax
            $.getJSON("/user/sendCode.do", {phone: phone}, function (result) {
                if (result.msg("OK")) {
                    alert("验证码已发出!");
                } else {
                    alert(result.msg);
                }
            })
        })
    });


    
    function time() {
        //剩余时间
        count--;
        if (count == 0) {
            //取消禁用
            $("#sendCode").removeAttr("disabled");
            //恢复60s
            count = 60;
            $("#sendCode").val("重新发送");
            clearInterval(id);
        } else {
            //修改按钮文字
            $("#sendCode").val(count + "s后,重新发送");
        }
    }
</script>

<script>
    $(document).ready(function () {
        // 判断直接进入哪个页面 例如 login.php?p=register
        switch ($.getUrlParam('p')) {
            case 'register':
                $('.register').show();
                break;
            case 'resetpwd':
                $('.resetpwd').show();
                break;
            default:
                $('.login').show();
        };
        // 发送验证码事件
          $('.getsms').click(function () {
                      var phone = $(this).parents('form').find('input.phone');
                      var error = $(this).parents('form').find('.error_msg');
                      switch (phone.validatemobile()) {
                          case 0:
                              // 短信验证码的php请求
                              error.html(msgtemp('验证码 <strong>已发送</strong>', 'alert-success'));
                              $(this).rewire(60);
                              break;
                          case 1:
                              error.html(msgtemp('<strong>手机号码为空</strong> 请输入手机号码', 'alert-warning'));
                              break;
                          case 2:
                              error.html(msgtemp('<strong>手机号码错误</strong> 请输入11位数的号码', 'alert-warning'));
                              break;
                          case 3:
                              error.html(msgtemp('<strong>手机号码错误</strong> 请输入正确的号码', 'alert-warning'));
                              break;
                      }
                  });
           // 以下确定按钮仅供参考
           $('.submit').click(function () {
               var form = $(this).parents('form')
               var phone = form.find('input.phone');
               var code = form.find('input.code');
               var pwd = form.find('input.password');
               var error = form.find('.error_msg');
               var success = form.siblings('.tabs_div');




               // 验证手机号参考这个
               switch (phone.validatemobile()) {
                   case 1:
                       error.html(msgtemp('<strong>手机号码为空</strong> 请输入手机号码', 'alert-warning'));
                       return;
                       break;
                   case 2:
                       error.html(msgtemp('<strong>手机号码错误</strong> 请输入11位数的号码', 'alert-warning'));
                       return;
                       break;
                   case 3:
                       error.html(msgtemp('<strong>手机号码错误</strong> 请输入正确的号码', 'alert-warning'));
                       return;
                       break;
               }
               //判断验证码
               switch(code.validatecode()){
                   case 1:
                       error.html(msgtemp('<strong>验证码不能为空</strong> 请输入验证码', 'alert-warning'));
                       return;
                       break;
               }

               // 验证密码复杂度参考这个
               switch (pwd.validatepwd()) {
                   case 1:
                       error.html(msgtemp('<strong>密码不能为空</strong> 请输入密码', 'alert-warning'));
                       return;
                       break;
                   case 2:
                       error.html(msgtemp('<strong>密码过短</strong> 请输入6位以上的密码', 'alert-warning'));
                       return;
                       break;
				   default:
                       error.html('');
               }





               form.ajaxForm(options);
               // 请求成功执行类似这样的事件
               // form.fadeOut(150,function() {
               // 	success.fadeIn(150);
               // });
           })
      });
</script>